<template>
    <div class="layout">
        <!-- 顶部标签 -->
        <app-header class="head">
            <template v-slot:head-title>
                <img src="@/assets/ui/xbox2.png" alt="">
            </template>
        </app-header>

        <!-- 搜索栏标签 -->
        <div class="search">
            <span></span>
            <input type="text" placeholder="搜索游戏开始探索"
            v-model="searchVal"
            @input="gameFind"
            @keydown.enter="gameSearch"/>
            <div class="input-show" v-show="isInput">
                <ul>
                    <li v-for="item in gameRes"
                        :key="item.id">
                        <router-link :to="{path:'/games/detail', query:{id: item.id}}">
                            <div class="input-pic">
                                <img :src="item.src">
                            </div>
                            <span>{{item.name}}</span>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 轮播图组件 -->
        <app-banner></app-banner>

        <!-- 主要内容 -->
        <div class="main">
            <!-- 首页导航 -->
            <div class="nav-game">
                <ul>
                    <li class="nav-item">
                        <router-link to="/games/vip">
                            <div class="nav-pic">
                            </div>
                            <span>会员订阅</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/games/newgames">
                            <div class="nav-pic">
                            </div>
                            <span>最新上架</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/games/passgames">
                            <div class="nav-pic">
                            </div>
                            <span>GAME PASS</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/games/zhgames">
                            <div class="nav-pic">
                            </div>
                            <span>中文游戏</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/games/disgames">
                            <div class="nav-pic">
                            </div>
                            <span>打折游戏</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/games/disdlc">
                            <div class="nav-pic">
                            </div>
                            <span>打折DLC</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/games/freegames">
                            <div class="nav-pic">
                            </div>
                            <span>免费游戏</span>
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link to="/games/pregames">
                            <div class="nav-pic">
                            </div>
                            <span>预购游戏</span>
                        </router-link>
                    </li>
                </ul>
            </div>

            <!-- 计时器 -->
            <div class="match">
                <div class="match-btn" @click="match">组队游玩</div>
                <transition name="matching">
                    <div class="match-wrapper" 
                        v-show="this.isMatch" 
                        @touchmove.prevent
                        @mousewheel.prevent>
                        <div class="match-box" @click="cancelMatch">
                            <div>匹配中</div>
                            <span>{{minute}}:{{second}}</span>
                            <div>点击取消匹配</div>
                        </div>
                    </div>
                </transition>
                
            </div>
        </div>

        <!-- 底部内容 -->
        <div class="bottom">
            <div class="nav-other">
                <div class="other-content">
                    <div class="other-left">
                        <span>新手扫盲</span>
                        <p>土阿埃俄已锁</p>
                    </div>
                    <div class="other-right">
                        <span>自助加群</span>
                        <p>点我</p>
                    </div>
                </div>
            </div>
            <!-- 底部选项卡 -->
            <div class="tap">
                <div class="tap-nav">
                    <router-link exact active-class="active" to='/home'>动态</router-link>
                    <router-link active-class="active" to='/home/review'>评测</router-link>
                    <router-link active-class="active" to='/home/rank'>排行</router-link>
                    <router-link active-class="active" to='/home/topics'>专题</router-link>
                    <router-link active-class="active" to='/home/purchase'>氪金</router-link>
                </div>
                <div class="tap-content">
                    <section>
                        <!-- <transition
                            :duration = "{enter: 800, leave: 150}"
                            enter-active-class="animate__animated animate__slideInRight"
                            enter-to-class="animate__animated animate__slideInRight"
                            leave-active-class="animate__animated animate__slideOutLeft"
                            leave-to-class="animate__animated animate__slideOutLeft"> -->
                            <router-view></router-view>
                        <!-- </transition> -->
                    </section>
                </div>
            </div>
        </div>

        <!-- 底部标签 -->
        <footer>
            <div class="foot">
                <p>我的底线就到这了哇~</p>
            </div>
        </footer>
    </div>
</template>

<script>
import appHeader from '@/components/app-header.vue'
import appBanner from '@/components/app-banner.vue'
import Brige from '@/assets/data/brige.js'
import {gameArray} from '@/assets/data/game.js'

export default {
    name: "Price",
    components: {
        appHeader,
        appBanner
    },
    data() {
        return {
            searchVal: "", //输入框值
            gameData: gameArray, // 原数据
            gameRes: [], // 输入值暂存数据
            isInput: false, // 判断输入框是否有值
            isMatch: false, // 判断是否点击匹配
            matchTimer: null, // 匹配用的定时器
            matchCount: 1, // 匹配的计时器数值
            second: "01", // 匹配的计时器秒数
            minute: "00", // 匹配的计时器分数
        }
    },
    methods: {
        // 搜索框输入值
        gameFind() {
            // 判断输入框是否有值
            if (this.searchVal.length == 0) {
                // 若输入框的值清空，隐藏预选框，并删除预选数组的数据
                this.isInput = false;
                this.gameRes = [];
                return;
            }
            this.gameData.forEach((item, index) => {
                let obj = {}
                let res = []
                // 若数据包含输入框的值，将对应数据添加到暂存的预选数组中
                if (item.name.startsWith(this.searchVal)) {
                    obj.name = item.name;
                    obj.src = item.src;
                    obj.type = item.type;
                    obj.price = item.price;
                    obj.type = item.type;
                    obj.id = index;
                    res.push(obj);
					// 传入去重数组
                    this.gameRes.push(...new Set(res));
                    this.isInput = true;
                    // 字母转小写
                    // /\w+/i
                }
            })
        },
        // 搜索框搜索
        gameSearch() {
            if (this.searchVal.length == 0) {
                this.$router.push({path:'/games'})
            } else {
                // 兄弟传值到Brige实例
                Brige.$emit('searchData', this.gameRes)
                this.$router.push({path:'/games/search'})
                console.log("兄弟传值到search页面");
            }
        },
        match() {
            this.isMatch = true;
            this.matchTimer = setInterval(() => {
                this.matchCount++;
				this.minute = Math.floor(this.matchCount / 60);
				this.second = Math.floor(this.matchCount % 60);
				this.minute = this.minute < 10 ? "0" + this.minute : this.minute;
                this.second = this.second < 10 ? "0" + this.second : this.second;
            }, 1000)
        },
        cancelMatch() {
            this.isMatch = false;
            this.matchCount = 1;
            this.second = "01",
            this.minute = "00",
            clearInterval(this.matchTimer);
            // console.log(this.matchCount);
        }
    }
}
</script>

<style lang="scss" scoped>
.layout {
    width: 100%;
    background-color: #2E2E2E;
    .head img {
        width: 30px;
        height: 30px;
        margin-left: 10px;
    }
    // 搜索框
    .search {
        width: 100%;
        height: 60px;
        background-color: #171717;
        top: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        >span {
            width: 20px;
            height: 20px;
            background-image: url(../assets/ui/search.png);
            background-size: cover;
            display: block;
            position: absolute;
            left: 55px;
        }
        input {
            width: 80%;
            height: 35px;
            box-sizing: border-box;
            padding-left: 40px;
            border-radius: 30px;
            background-color: #454545;
            color: white;
            &::placeholder {
                font-size: 16px;
                color: white;
            }
        }
        .input-show {
            width: 100%;
            padding: 5px 0 10px;
            box-sizing: border-box;
            position: absolute;
            top: 60px;
            z-index: 100;
            &::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: -1;
                opacity: 0.9;
                background-color: #171717;
            }
            ul {
                padding: 0 15px;
                box-sizing: border-box;
                color: white;
                li {
                    border-bottom: 1px dashed gray;
                    padding: 0 15px;
                    box-sizing: border-box;
                    overflow: hidden;
                    &:last-child {
                        border-bottom: 0;
                    }
                    a {
                        height: 60px;
                        color: white;
                        display: flex;
                        align-items: center;
                        .input-pic {
                            height: 50px;
                            margin-right: 10px;
                            img {
                                height: 50px;
                            }
                        }
                        span {
                            height: 60px;
                            line-height: 60px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    margin-top: 80px;
}
    // 主要内容
    .main {
        width: 100%;
        margin-top: 95px;
        padding: 0 15px;
        box-sizing: border-box;
        .nav-game {
            width: 100%;
            >ul {
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                overflow: hidden;
                >li {
                    width: 25%;
                    flex-shrink: 0;
                    margin-bottom: 15px;
                    a {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .nav-pic {
                            width: 60px;
                            height: 60px;
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center;
                            border-radius: 5px;
                            cursor: pointer;
                        }
                        span {
                            display: block;
                            padding: 5px 0;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-size: 13px;
                            color: white;
                        }
                    }
                    &:nth-child(1) .nav-pic {
                        background-image: url(../assets/ui/nav-1.png);
                    }
                    &:nth-child(2) .nav-pic {
                        background-image: url(../assets/ui/nav-2.png);
                    }
                    &:nth-child(3) .nav-pic {
                        background-image: url(../assets/ui/nav-3.png);
                    }
                    &:nth-child(4) .nav-pic {
                        background-image: url(../assets/ui/nav-4.png);
                    }
                    &:nth-child(5) .nav-pic {
                        background-image: url(../assets/ui/nav-5.png);
                    }
                    &:nth-child(6) .nav-pic {
                        background-image: url(../assets/ui/nav-6.png);
                    }
                    &:nth-child(7) .nav-pic {
                        background-image: url(../assets/ui/nav-7.png);
                    }
                    &:nth-child(8) .nav-pic {
                        background-image: url(../assets/ui/nav-8.png);
                    }
                }
            }
        }
        .match {
            width: 100%;
            // margin-top: 25px;
            height: 60px;
            display: flex;
            justify-content: center;
            .match-btn {
                width: 100%;
                height: 60px;
                line-height: 60px;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                color: white;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                border-radius: 10px;
                background-color: #111;
                cursor: pointer;
            }
            .matching-enter { opacity: 0;}
            .matching-enter-to { opacity: 1;}
            .matching-leave { opacity: 1;}
            .matching-leave-to { opacity: 0;}
            .matching-enter-active, .matching-leave-active { transition: all 0.3s; }
            .match-wrapper {
                width: 100%;
                height: 100%;
                position: fixed;
                background-color: rgba(0, 0, 0, 0.385);
                color: white;
                top: 0;
                z-index: 10000;
                .match-box {
                    width: 200px;
                    height: 200px;
                    border: 5px solid lightgreen;
                    background-color: rgba(0, 0, 0, 0.688);
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: -120px;
                    margin-left: -100px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    div:first-child {
                        font-size: 20px;
                        margin-top: 30px;
                    }
                    span {
                        font-size: 38px;
                        margin-top: 15px;
                        color: greenyellow;
                    }
                    div:last-child {
                        font-size: 15px;
                        margin-top: 15px;
                        color: white;
                        background-color: transparent;
                    }
                }
            }
        }
    }
    .bottom {
        margin-top: 15px;
        .nav-other {
            width: 100%;
            height: 100px;
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            .other-content {
                width: 95%;
                height: 70px;
                display: flex;
                .other-left {
                    width: 50%;
                    border-right: 1px solid #999;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
                .other-right {
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
                span {
                    color: white;
                    font-size: 18px;
                    margin-bottom: 10px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                p {
                    color: #999;
                    font-size: 14px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
        .tap {
            margin-top: 25px;
            width: 100%;
            .tap-nav {
                height: 60px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: #111;
                a {
                    font-weight: bold;
                    color: white;
                    position: relative;
                    &.active::after {
                        width: 50px;
                        content: "";
                        display: block;
                        border-bottom: 3px solid white;
                        position: absolute;
                        top: 36px;
                        left: -10px;
                    }
                }
            }
            .tap-content {
                margin-top: 25px;
                margin: 25px 15px 0 15px;
                box-sizing: border-box;
            }
        }
    }
    footer {
        width: 100%;
        height: 160px;
        padding-top: 30px;
        box-sizing: border-box;
        .foot {
            height: 50px;
            line-height: 50px;
            background-color: black;
            color: #999;
            display: flex;
            justify-content: center;
            align-items: baseline;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}
</style>
